<template>
    <!-- #ifndef MP-WEIXIN -->
    <view class="cu-custom" :style="[{ height: CustomBar + 'px', opacity: headerOpacity }]">
        <view class="cu-bar " :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
            <block>
                <!-- #ifdef MP-WEIXIN -->
                <!-- <view class="action" @tap="BackPage" v-if="isBack && !backSolt">
                    <text :class="pagesLen == 1 ? 'cuIcon-home' : 'cuIcon-back'" v-if="backIcon == ''"></text>
                    <text :class="backIcon" v-else></text>
                    <slot name="backText"></slot>
                </view> -->
                <!-- #endif -->

                <!-- #ifdef H5 -->
                <!-- 在 App webview 要单独处理 -->
                <block v-if="isNativeApp()">
                    <view class="action" @tap="isNativeBack" v-if="isBack && !backSolt">
                        <text class="cuIcon-back"></text>
                        <slot name="backText"></slot>
                    </view>
                </block>

                <block v-if="!isNativeApp()">
                    <view class="action" @tap="BackPage" v-if="isBack && !backSolt">
                        <text :class="pagesLen == 1 ? 'cuIcon-home' : 'cuIcon-back'" v-if="backIcon == ''"></text>
                        <text :class="backIcon" v-else></text>
                        <slot name="backText"></slot>
                    </view>
                </block>
                <!-- #endif -->

                <view class="action" v-if="isBack && backSolt">
                    <slot name="backbox"></slot>
                </view>
            </block>

            <!-- #ifndef MP-WEIXIN -->
            <view class="content" :style="[{ top: StatusBar + 'px' }]">
                <slot name="content"></slot>
            </view>

            <slot name="right"></slot>
            <!-- #endif -->
        </view>
    </view>
    <!-- #endif -->
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			pagesLen: 0 // 页面栈数量
		}
	},
	name: 'CuCustom',
	computed: {
		style() {
			var StatusBar = this.StatusBar
			var CustomBar = this.CustomBar
			var bgImage = this.bgImage
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`
			}
			return style
		}
	},
	created() {
		/**
             * 兼容 手机状态栏 高度
             */
		var that = this
		uni.getSystemInfo({
			success(e) {
				// #ifndef MP
				that.StatusBar = e.statusBarHeight
				if (e.platform == 'android') {
					that.CustomBar = e.statusBarHeight + 50
				} else {
					that.CustomBar = e.statusBarHeight + 45
				}
				// #endif

				// #ifdef MP-WEIXIN
				that.StatusBar = e.statusBarHeight
				let custom = wx.getMenuButtonBoundingClientRect()
				that.Custom = custom
				that.CustomBar = custom.bottom + custom.top - e.statusBarHeight
				// #endif

				// #ifdef MP-ALIPAY
				that.StatusBar = e.statusBarHeight
				that.CustomBar = e.statusBarHeight + e.titleBarHeight
				// #endif
			}
		})
	},
	mounted() {
		this.pagesLen = getCurrentPages().length
		console.log(this.pagesLen)
	},
	props: {
		bgColor: {
			// 背景颜色类名
			type: String,
			default: ''
		},
		isBack: {
			// 是否显示返回
			type: [Boolean, String],
			default: false
		},
		backSolt: {
			type: Boolean,
			default: false
		},
		bgImage: {
			// 背景图片
			type: String,
			default: ''
		},
		backCallType: {
			// 返回事件是否返回
			type: Boolean,
			default: false
		},
		backIcon: {
			// 是否需要自定义icon
			type: String,
			default: ''
		},
		headerOpacity: {
			// 透明度
			type: Number,
			default: 1
		}
	},
	methods: {
		moveHandle() { },
		BackPage() {
			// 是否需要返回
			if (this.backCallType) {
				this.$emit('cuBack')
			} else {
				console.log('进来了')
				// 判断页面栈是否只有一个
				if (this.pagesLen == 1) {
					uni.reLaunch({
						url: '/pages/index/index/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		},
		// 原生头部返回页面
		isNativeBack() {
			console.log('撒大声地')
			if (this.pagesLen == 1) {
				this.$sdk.exit()
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
}
</script>

<style>
.cu-bar .action {
    color: #000000;
}
</style>
